
import React from 'react';
import * as THREE from 'three';
import { Card, Form } from "antd";
import { useElement } from "tools/hooks/useElement";
import SelectTarget from 'components/SelectTarget';
import Controller from 'Controller';
import threeToMap from 'tools/fns/threeToMap';
// import { useProperty } from 'tools/hooks/useProperty';


/**
 * 平行光是沿着特定方向发射的光。
 * 这种光的表现像是无限远,从它发出的光线都是平行的。
 * 常常用平行光来模拟太阳光 的效果; 
 * 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的 
 **/
export default function DirectionalLightCard() {

    const { element } = useElement();

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const light = React.useMemo<THREE.Light | undefined>(() => {
        if (!element) return undefined
        if (element.type === 'light') {
            return element.object3D as THREE.Light;
        }
    }, [element])

    const directionalLight = React.useMemo<THREE.DirectionalLight | undefined>(() => {
        if (light instanceof THREE.DirectionalLight) {
            return light
        } else {
            return undefined;
        }
    }, [light])

    // const { setProperty } = useProperty(spotLight)

    if (!directionalLight) return <></>;
    return (
        <Card title="平行光">
            <Form
                layout="horizontal"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
            >
                <Form.Item label='目标'>
                    <SelectTarget
                        uuid={threeToMap(elementMap, directionalLight.target.uuid)}
                        onChange={e => { directionalLight.target = elementMap.get(e)?.getObject3D() || new THREE.Object3D() }}
                    />
                </Form.Item>
            </Form>
        </Card>
    )
}